<template>
	<view class="overall-content">
		<dev-navbar @information="information" :title="title"></dev-navbar>
		<view class="q-a-box" v-if="evaluationInformation">
			<view class="progress-box" :style="{'top':`${navAllHeight}px`}">
				<progress class="progress-bar"
					:percent="(evaluationInformation.answerProgress.totalCurrentProgress/evaluationInformation.answerProgress.askTotal*100).toFixed()"
					stroke-width="8" backgroundColor="#E7F3FC" activeColor="#F5A623" />
				<text>{{evaluationInformation.answerProgress.totalCurrentProgress ||''}}/{{evaluationInformation.answerProgress.askTotal || ''}}</text>
			</view>
			<!-- 正式问答界面 -->
			<view class="formal-answer" v-for="(item,index) in list" :key="index">
				<view class="asked-the-robot">
					<dev-svg-image width="100" height="100" mode="image"
						imageUrl="shoppingMall/9EA75A3CE0D4403DAF860DD1CC273017.png"></dev-svg-image>
					<view class="machine-bubble">
						{{item.conversationInformation.ask.askName}}
					</view>
				</view>

				<selection-box :answerValue="item.answerValue" :lastAnswer="item.lastAnswer" v-show="item.edit"
					@noChange="noChange(index)" @change="dataChange($event,item,index)"
					:data="item.conversationInformation" :ansIds="item.ansIds" :evaluation-data="evaluationData">
				</selection-box>

				<view class="people-answer" v-if="item.answerValue">
					<view class="human-bubble">
						{{item.answerValue}}{{ item.answerValue=='不知道'?'':(item.unitName||'')}}
						<dev-svg-image @tap.stop="reEdit(item,index)" width="42" height="42" style="margin-left: 18rpx;"
							svgName="edit" modifyColor="#fff"></dev-svg-image>
					</view>
					<dev-svg-image radius="50" width="100" height="100" mode="image" :imageUrl="userImage">
					</dev-svg-image>
				</view>

			</view>

		</view>





		<dev-iphone-bottom bgColor="#E7F3FC"></dev-iphone-bottom>
	</view>
</template>

<script>
	import selectionBox from '@/pagesHome/components/selection-box.vue'
	export default {
		components: {
			selectionBox
		},
		data() {
			return {
				navAllHeight: global.navAllHeight,
				title: '',
				evaluationInformation: '', //测评信息
				list: [], //循环列表，里面包含机器人问题，和用户回答
				evaluationData: '', //生成的测评数据

				userImage: '', //用户头像地址

				topicId: '', //问卷类型id

				userAnsId: '', //当前问卷id
                
                storeId:''

			};
		},
		onLoad(e) {
			console.log(global.userInfo, '当前用户信息');
			this.userImage = global.userInfo.avatarUrl;
			this.topicId = e.topicId;
			this.title = e.title;
            if(e.storeId){
                this.storeId = e.storeId
            }
            
			this.isTheAssessmentCompleted(); //

		},
		methods: {
			//获取navAllHeight 信息
			information(e) {
				this.navAllHeight = e.navAllHeight;
			},
			//判断当前用户是否存在未评估完成的问卷
			isTheAssessmentCompleted() {
				this.list = [];
				let _this = this;
				this.$https.get(global.apiUrls.isTheAssessmentCompleted, {
					phone: global.userInfo.phone,
					topicId: this.topicId,
					userId: global.userInfo.userId,
                    storeId:this.storeId
				}).then(res => {
					let result = res.data.result;
					// 如果没有未完成的评估问卷
					if (res.data.code == '2502') {
						this.productionNewEvaluation();
					} else {
						this.evaluationData = this.evaluationInformation = result;
						result.askAnsRecordVOList.forEach(item => {
							_this.list.push({
								edit: false,
								lastAnswer: true,
								answerValue: item.answers,
								askId: item.askId,
								unitName: item.unitName,
								ansIds: item.ansIds,
								conversationInformation: {
									ask: {
										askName: item.askName,
										topicId: _this.topicId,
										askType: item.askType,
										askId: item.askId,
									}
								}
							})
						})

						let ansids = [];
						let ansName = [];
						let defaultValue = [];
						this.evaluationInformation.continueAsk.answers.forEach(item => {
							if (item.defaultValue) {
								ansids.push(item.ansId)
								ansName.push(item.ansName)
								defaultValue.push(item.defaultValue)
							}
						})

						this.list.push({
							edit: true,
							submitValue: '',
							lastAnswer: false,
							conversationInformation: {
								...{
									ansName: ansName.toString(),
									defaultValue:defaultValue.toString(),
								},
								...result.continueAsk
							},
							answerValue:'',
							unitName: result.continueAsk.ask.unitName,
							ansIds: ansids.toString(),
						})
						this.userAnsId = res.data.result.userAnsId;
						this.scrollBottom();
					}
				})
			},
			//获取选项信息
			queryCorrespondingOptions(item, index) {
				this.$https.get(global.apiUrls.queryCorrespondingOptions(this.topicId, item.askId)).then(res => {
					if (res.data.code == 1000) {
						this.list[index].conversationInformation['answers'] = res.data.result.answers;
						this.list[index].conversationInformation['ask'] = res.data.result;
						this.list[index].edit = true;
					}
				})
			},

			//生成新的测评数据
			productionNewEvaluation() {
				this.$https.post(global.apiUrls.productionNewEvaluation, {
					phone: global.userInfo.phone,
					topicId: this.topicId,
					userId: global.userInfo.userId,
                    storeId:this.storeId
				}).then(res => {
					if (res.data.code == 1000) {
						this.evaluationData = res.data.result;
						this.userAnsId = res.data.result.userAnsId;
						this.startAssessment(); //开始进行测评
					}
				})
			},
			//开始进行测评
			startAssessment() {
				this.$https.post(global.apiUrls.startAssessment, {
					phone: global.userInfo.phone,
					topicId: this.topicId,
					userId: global.userInfo.userId,
				}).then(res => {
					if (res.data.code == 1000) {
						this.evaluationInformation = res.data.result;
						this.list.push({
							edit: true,
							submitValue: '',
							lastAnswer: false,
							conversationInformation: res.data.result,
							answerValue: '',
							unitName: res.data.result.ask.unitName,
							ansIds: '',
						})

					}
				})
			},
			//数据未发生改变点击确认按钮
			noChange(index) {
				this.list[index].edit = false;
			},
			//数据发生改变
			dataChange(val, item, index) {
				console.log(val, item, '噜啦啦噜啦啦======啦啦啦啦啦来了')
				this.list[index].edit = false;
				if (this.list[index].answerValue == val.ansValue) return
				//如果answerValue 有值就是修改 否则就是提交
				if (item.answerValue) {
					console.log(item.answerValue, '修改')
					this.$https.put(global.apiUrls.updateAnswer, val).then(res => {
						if (res.data.code == 1000) {
							this.list[index].lastAnswer = false;
						}
					})
				} else {
					console.log('提交')
					this.$https.post(global.apiUrls.submitAnswers, val).then(res => {
						if (res.data.code == 1000) {
							this.evaluationInformation = res.data.result;
							let ansids = [];
							let ansName = [];
							let defaultValue = [];
							this.evaluationInformation.answers.forEach(item => {
								if (item.defaultValue) {
									ansids.push(item.ansId)
									ansName.push(item.ansName)
									defaultValue.push(item.defaultValue)
								}
							})

							this.list.push({
								edit: true,
								submitValue: '',
								lastAnswer: false,
								conversationInformation: {
									...{
										ansName: ansName.toString(),
										defaultValue:defaultValue.toString(),
									},
									...res.data.result
								},
								answerValue:'',
								unitName: res.data.result.ask.unitName,
								ansIds: ansids.toString(),
							})
							this.scrollBottom();

						}
						//已回答完所有问题了 关闭当前界面跳转生产报告
						if (res.data.code == 2501) {
							this.$https.post(global.apiUrls.generateEvaluationReport, {
								topicId: this.topicId,
								userAnsId: this.userAnsId,
								userId: global.userInfo.userId,
							}).then(res => {
								if (res.data.code == 1000) {
									this.$urouter.redirectTo({
										url: '/pagesHome/evaluation-report/evaluation-report',
										params: {
											topicId: this.topicId,
											userAnsId: this.userAnsId,
										}
									});
								}
							})
						}
					})
				}
				this.list[index].submitValue = val;
				this.list[index].answerValue = val.ansValue;
				console.log(this.list[index], '修改后的值')

			},
			//滚动到底部
			scrollBottom() {
				this.$nextTick(function() {
					setTimeout(() => {
						uni.pageScrollTo({
							scrollTop: 999999,
							duration: 300
						})
					}, 200) // 要加点延迟, 不然有可能不生效
				});
			},

			//重新编辑
			reEdit(item, index) {
				//如果存在askid 代表这道题是从之前加载过来的，需要获取选项
				if (item.askId && item.lastAnswer) {
					// console.log()
					this.queryCorrespondingOptions(item, index)
				} else {
					this.list[index].edit = true;
				}
			}


		}
	}
</script>

<style lang="scss">
	.overall-content {
		min-height: 100vh;
		background-color: #E7F3FC;

		.q-a-box {
			padding: 24rpx;

			.progress-box {
				width: 750rpx;
				position: fixed;
				left: 0;
				padding: 26rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #E7F3FC;
				z-index: 100;
			}

			.progress-bar {
				width: 610rpx;
				border: 1rpx solid #F5A623;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.formal-answer {
				// background-color: aqua;
				margin-top: 70rpx;

				//机器人回答
				.asked-the-robot {
					display: flex;
					margin-bottom: 50rpx;

					.machine-bubble {
						background-color: #fff;
						border-radius: 8rpx 34rpx 34rpx;
						padding: 20rpx 34rpx;
						margin-left: 22rpx;

						font-size: 36rpx;
						font-weight: 400;
						color: #4A4A4A;
						line-height: 49rpx;

					}
				}

				.people-answer {
					display: flex;
					justify-content: flex-end;
					margin-bottom: 50rpx;

					.human-bubble {
						display: flex;
						background: #77E4DD;
						border-radius: 34rpx 8rpx 34rpx 34rpx;
						padding: 20rpx 34rpx;
						margin-right: 22rpx;

						font-size: 36rpx;
						font-weight: 400;
						color: #4A4A4A;
						line-height: 49rpx;
					}

				}


			}

		}

	}
</style>
